<template>
  <div class="page-container padding-20 query-list-container">
    <div v-show="$route.fullPath === $route.matched[1].path">
      <div class="toolbar-container">
        <el-button type="primary" icon="el-icon-plus" size="small" @click="linkToAdd">新建权益</el-button>
      </div>
      <el-table class="mt-20 el-table-modify" :data="tableData" border>
        <!-- <el-table-column type="index" label="序号" align="center" width="50"></el-table-column> -->
        <el-table-column prop="id" align="center" label="权益ID"></el-table-column>
        <el-table-column prop="name" align="center" label="权益类型"></el-table-column>
        <el-table-column prop="usedAmount" align="center" label="关联品牌"></el-table-column>
        <el-table-column prop="status" align="center" label="状态">
          
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="120">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="linkToEdit(scope.row.id)">修改</el-button>
            <el-button v-if="scope.row.status == '正常'" size="mini" type="text" @click="pauseEquity(scope.row.id)" >暂停使用</el-button>
            <el-button v-else size="mini" type="text" @click="recoverEquity(scope.row.id)">回复正常</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        ref="pagination"
        class="mt-20"
        background
        :page-size.sync="pageOption.pageSize"
        :total="pageOption.total"
        @size-change="onSizeChange"
        @current-change="onPageChange"
        layout="slot,->,prev,pager,next,sizes,jumper"
      >
        <span
            class="pagination-title"
          >共 {{pageOption.total}} 条记录 第 {{pageOption.page}} / {{pageOption.pageTotal}} 页</span>
      </el-pagination>
    </div>
    <router-view v-if="$route.fullPath !== $route.matched[1].path" 
      @refresh="requestData"></router-view>
  </div>
</template>

<script>
import {STATUS} from '@/utils/const';
import {equityQuery, equityPause, equityRecover} from '@/api/equityCategory'

export default {
  name: "EquityMgt",
  data() {
    this.STATUS = STATUS;
    return {
      tableData: [],
      pageOption: {
        page: 1,
        pageSize: 20,
        total: 0,
        pageTotal: 1
      }
    };
  },
  methods: {
    linkToAdd() {
      this.$router.push({name: 'addEquityCategory'})
    },
    linkToEdit(id) {
       this.$router.push({name: 'editEquityCategory', params: {id}})
    },
    async requestData() {
      const {page, pageSize : size} = this.pageOption
      const {data, total} = await equityQuery({page: page - 1, size})
      this.tableData = data;
      this.pageOption.total = total;
      this.pageOption.pageTotal = total ? Math.ceil(total / size) : 1;

      let childrenRefs = this.$refs.pagination.$children
      this.$nextTick(() => {
        childrenRefs.forEach(child => child.$forceUpdate())
      });
    },
    async pauseEquity(id) {
      try{
        this.$confirm('确定要暂停使用该权益吗？', {
          type: 'warning',
          callback: async (action) => {
            if (action == 'confirm') {
              await equityPause(id)
              this.requestData();
            }
          }
        });
      } catch (err) {

      } 
    },
    async recoverEquity(id) {
      try{
        this.$confirm('确定要恢复使用该权益吗？', {
          type: 'warning',
          callback: async (action) => {
            if (action == 'confirm') {
              await equityRecover(id)
              this.requestData();
            }
          }
        });
      } catch (err) {
        
      } 
    },
    onSizeChange(size) {
      this.pageOption.pageSize = size;
      this.requestData();
    },
    onPageChange(page) {
      this.pageOption.page = page;
      this.requestData();
    }
  },
  created() {
    this.requestData();
  }
};
</script>

<style lang="scss">
.pagination-title {
  font-weight: normal;
}
</style>